<!--
 * @Author: 孙丹平
 * @Date: 2021-04-06 19:28:11
 * @LastEditors: 孙丹平
 * @LastEditTime: 2021-04-25 17:23:36
 * @Description: file content
-->
<template>
  <span :id="id">{{ data }}</span>
</template>
<script>
import CountUp from 'countup'
export default {
  props: {
    decimal: {
      type: Number,
      default: 0
    },
    options: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      id: 'countup' + Date.now() + '_' + ((Math.random() * 10000000000) | 0),
      target: null
    }
  },
  watch: {
    data(newal, oldVal) {
      this.watchDecimal()
    }
  },
  mounted() {
    /**
     *
     * target: 目标元素的id  *必填
     * startVal：开始的值(从哪个值开始)  *必填
     * endVal：结束的值(滚动到哪个值结束)  *必填
     * decimals：小数位数，默认值为0  *可选
     * duration：动画持续时间，单位为秒，默认值为2  *可选
     * options：选项的可选对象  *可选
     * useEasing:true  --是否使用缓动动画，默认为缓动，可设置为false让其匀速
                     useGrouping:true --对数字进行分组，如12345，按三位一组变为类似12,345这样的

                     separator: ','  --分组时使用的分隔符默认是逗号

                      decimal: '.'  --小数点

                      prefix: ''  --添加前缀如12345，变为￥12345

                      suffix: ''  --添加后缀如12345 通过添加后缀变为12345$，12345元之类的

                      方法：

                      暂停/恢复      pauseResume
                      重置动画       reset
                      更新值           update(newVal)
     */
    this.update()
  },
  methods: {
    watchDecimal() {
      /**
       * 监听数据变化
       * 如果小数位变化了
       * 强制渲染countUp
       * 否则updatte
       */
      const decimal = this.data.toString().includes('.')
        ? this.data.toString().split('.')[1].length
        : 0
      if (decimal === this.decimal) {
        console.log(decimal)
        this.target.update(this.data)
      } else {
        console.log(decimal)
        this.update(decimal)
      }
    },
    update(decimal = 0) {
      this.target = new CountUp(
        this.id,
        0,
        this.data * 1,
        this.decimal || decimal,
        2,
        this.options
      )
      this.target.start()
      if (!this.target.error) {
      } else {
        console.error(this.target.error)
      }
    }
  }
}
</script>
